<template>
  <view class="team-list">
	  <view class="" v-if="list.length">
	  	<view class="team-item" v-for="(item,index) in list" :key='index' >
	  	  <view class="item-title">
	  	    <text class="left">订单编号：{{item.orderNo}}</text>
	  	    <text class="right">{{item.createdOn}}</text>
	  	  </view>
	  	  <view class="item-main" v-for="(cur,i) in item.list" :key='i'>
	  	    <view class="left"><image style="width: 100%;height: 100%;" :src="cur.thumbnail" mode=""></image></view>
	  	    <view class="right">
	  	      <text class="right-title">{{cur.name}}</text>
	  	      <text class="right-num">数量: {{cur.count}} 规格 {{cur.standardName}}</text>
	  	      <text class="right-order">订单总计: ￥{{cur.price}}</text>
	  	    </view>
	  	  </view>
	  	  <view class="item-bottom"><text>粉丝ID：{{item.shortid}}</text></view>
	  	</view>
	  </view>
		<view class="nodata flex_center" v-else>
			~暂无数据~
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		finished:false,
		pageIndex:1,
		pageSize:10,
		list:[]
	};
  },
  methods:{
	  getList(){
		  this.$ajax('api/Member/QueryMyPinTuan',{pageIndex:this.pageIndex,pageSize:this.pageSize}).then(res=>{
			  if (res.Data.list.length) {
			  	this.list = this.list.concat(res.Data.list);
			  	this.pageIndex++;
			  	this.finish = false;
			  } else {
			  	this.finish = true;
			  }
		  })
	  }
  },
  onShow() {
	  this.pageIndex =1
	  this.list = []
  	this.getList()
  },
  onReachBottom() {
  	if(!this.finished){
		this.getList()
	}
  }
};
</script>

<style lang="scss">
.team-list {
  width: 100vw;
  min-height: 100vh;
  background-color: #e9eaed;
  padding: 1px 0 0;
  .team-item {
    padding: 34rpx 30rpx;
    box-sizing: border-box;
    width: 690rpx;
    height: 370rpx;
    background-color: #FFFFFF;
    border-radius: 26rpx;
    margin-left: 30rpx;
    margin-top: 27rpx;
    .item-title {
      display: flex;
      justify-content: space-between;
      // border-bottom: 1px solid #e8e8e8;
      .left {
        font-size: 26rpx;
        color: #333;
      }
      .right {
        font-size: 24rpx;
        color: #999;
      }
    }
    .item-main {
      box-sizing: border-box;
      margin-top: 33.5rpx;
      display: flex;
      padding-top: 33.5rpx;
      height: 193rpx;
      border-bottom: 1px solid #e8e8e8;
      border-top: 1px solid #e8e8e8;
      margin-bottom: 18.5rpx;
      .left {
        width: 125rpx;
        height: 125rpx;
        background-color: #c4c4c4;
        margin-right: 30rpx;
        image {
          width: 125rpx;
          height: 125rpx;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        .right-title {
          font-size: 26rpx;
          color: #333333;
        }
        .right-num {
          margin-top: 27rpx;
          font-size: 22rpx;
          color: #999;
        }
        .right-order {
          font-size: 22rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }
    .item-bottom {
      text {
        font-size: 26rpx;
        color: #a17a40;
        margin-top: 28.5rpx;
      }
    }
  }
}
</style>
